<template>
  <div class="">
    <SearchContainer @search="getData" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="form-style-flex" :model="formState">
        <a-form-item name="zjm" class="w-[300px]">
          <a-input v-model:value="formState.zjm" placeholder="装备名称/助记码/装备编号" />
        </a-form-item>
        <a-form-item name="classificationId" label="资产分类" class="w-[300px] ml-4">
          <SelectAsset v-model:value="formState.classificationId" />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2">
      <div class="flex">
        <a-button class="mb-2 mr-2" type="primary" @click="onCLickEdit"> 添加 </a-button>
        <BaseExport type="战救" name="装备配发" code="000579" :search-params="{ ...formState }">导出</BaseExport>
      </div>
      <BaseTable :data-source="tableData" fill :loading="loading" column-code="000579" :pagination="pagination">
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex === 'NO'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'equipmentName'">
            <MedicineInfo :value="{ mc: record.equipmentName, gg: record.specifications, cj: record.manufacturer }" />
          </template>
          <template v-if="column.dataIndex === 'equipmentCode'">
            <PopoverTable :config="detailConfig" :width="800" :params="{ distributionId: record.equipmentCode }">{{ record.equipmentCode }}</PopoverTable>
          </template>
          <template v-if="column.dataIndex === 'userManualName'">
            <div
              class="underline text-[#3758f1] cursor-pointer"
              :title="record.userManualName"
              @click="downloadFile(record.userManualUrl, record.userManualName)"
            >
              {{ record.userManualName }}
            </div>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-space>
              <BaseButton type="link" size="small" @click="onCLickEdit(record)"> 修改 </BaseButton>
              <BaseButton type="link" size="small" @click="onCLickEquip(record)"> 装备图 </BaseButton>
              <BaseButton confirm-text="确认删除？" type="link" danger size="small" @click="onCLickDel(record)"> 删除 </BaseButton>
              <BaseButton type="link" size="small" @click="onCLickDisposition(record)"> 配置 </BaseButton>
            </a-space>
          </template>
        </template>
      </BaseTable>
    </a-card>
    <Edit v-model:open="editOpen" :row-data="rowData" @success="onSuccess" />
    <Equip v-model:open="open" :row-data="rowData" @success="onSuccess" />
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'
import SearchContainer from '@/components/SearchContainer'
import BaseTable from '@/components/BaseTable'
import Edit from './components/Edit.vue'
import Equip from './components/Equip.vue'

const router = useRouter()
const editOpen = ref(false)
const rowData = ref({})
const formRef = ref(null)
const open = ref(false)

const detailConfig = ref({
  url: '/war/equipmentConfig/getEquipmentConfigList',
  columnCode: '000584',
  rowKey: 'id',
  formatResult: (data) => {
    return data.map((item, index) => ({
      ...item,
      NO: index + 1
    }))
  }
})
const downloadFile = (url, title) => {
  fetch(url)
    .then((response) => response.blob())
    .then((blob) => {
      const url = window.URL.createObjectURL(blob)
      const a = document.createElement('a')
      a.href = url
      a.download = title // 设置下载的文件名
      document.body.appendChild(a)
      a.click()
      a.remove()
      window.URL.revokeObjectURL(url)
    })
    .catch()
}

const formState = ref({
  dateRange: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
})
const onSuccess = () => {
  getData()
}
const onCLickDisposition = (record) => {
  router.push({
    path: '/hygiene-equip/equip-allot/disposition',
    query: {
      id: record.equipmentCode
    }
  })
}

const { loading, tableData, getData, pagination } = useTable({
  url: '/war/equipmentDistribution/getEquipmentDistributionList',
  immediate: true,
  formatParams: () => {
    return {
      ...formState.value
    }
  }
})
const onCLickDel = async (record) => {
  const { code, msg } = await post('/war/equipmentDistribution/doDelEquipmentDistribution', { id: record.id, status: 0 })
  if (code !== 0) return message.error(msg || '操作失败')
  message.success(msg || '操作成功')
  getData()
}
const onCLickEdit = (record = {}) => {
  rowData.value = record
  editOpen.value = true
}
const onCLickEquip = (record = {}) => {
  rowData.value = record
  open.value = true
}

onMounted(() => {
  getData()
})
</script>
